<template>
  <div class="page-cardBagSetting views-container">
    <div class="wlm-table">
      <div class="wlm-dialog-content">
        <el-form
          ref="cardBagSetting"
          size="small"
          label-width="130px"
          class="retail-form"
          label-position="right"
        >
          <!-- 推广 -->
          <el-form-item label="推广">
            <el-button type="primary" @click="sharelink">推广链接</el-button>
          </el-form-item>
          <!-- 推广 end -->
          <!-- 分享内容 -->
          <el-form-item label="分享内容">
            <el-input
              v-model.trim="formFormatData.formData.share_content"
              placeholder="请输入分享内容"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <!-- 分享内容 end -->
          <!-- 分享图 -->
          <el-form-item label="分享图">
            <choose-files
              ref="chooseShareImage"
              :config="chooseShareImageformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：500*400像素</div>
          </el-form-item>
          <!-- 分享图 end -->
          <!-- 地图标记图 -->
          <el-form-item label="地图标记图">
            <choose-files
              ref="chooseMapImage"
              :config="chooseMapImageformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：50*50像素</div>
          </el-form-item>
          <!-- 地图标记图 end -->
          <!-- 广告图 -->
          <el-form-item label="广告图">
            <choose-files
              ref="chooseAdImage"
              :config="chooseAdImageformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">
              建议尺寸：大小0.5M以下,建议尺寸690×140px
            </div>
          </el-form-item>
          <!-- 广告图 end -->
          <!-- 广告链接 -->
          <el-form-item label="广告链接">
            <el-input
              :value="formFormatData.formData.ad_link"
              style="width: 60%"
              @focus="adLinkToggle"
            ></el-input>
          </el-form-item>
          <!-- 广告链接 end -->
          <!-- 文字自定义 -->
          <el-form-item label="文字自定义"></el-form-item>
          <el-form-item label="卡包">
            <el-input
              v-model.trim="formFormatData.formData.font.ka_bao"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <el-form-item label="次">
            <el-input
              v-model.trim="formFormatData.formData.font.ci"
              style="width: 60%"
            ></el-input>
          </el-form-item>
          <!-- 文字自定义 end -->
          <!-- 海报图片 -->
          <el-form-item label="海报图片">
            <choose-files
              ref="choosePoster"
              :config="choosePosterformConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸：大小2M以下,建议尺寸750×1334px</div>
          </el-form-item>
          <!-- 海报图片 end -->
          <!-- 海报设置 -->
          <el-form-item
            label="海报设置"
            v-if="formFormatData.formData.poster.length > 0"
          >
            <div class="poster-wrap">
              <div
                class="poster-box"
                v-bind:style="{
                  'background-image': `url(${getPath('drag-bg.png')})`,
                }"
              >
                <!-- 背景图 -->
                <div
                  v-for="(item, index) in formFormatData.formData.poster"
                  :key="index"
                  style="position: absolute"
                >
                  <img
                    :src="item.file_path"
                    style="width: 375px; height: 667px; position: relative"
                  />
                </div>
                <div class="poster-img">
                  <!-- 拖动组件 -->
                  <vue-draggable-resizable
                    :w="112"
                    :h="112"
                    :x="x"
                    :y="y"
                    @dragging="onDrag"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/image/11.png"
                      style="width: 110px; height: 110px"
                    />
                  </vue-draggable-resizable>
                  <vue-draggable-resizable
                    :w="50"
                    :h="50"
                    :x="x1"
                    :y="y1"
                    @dragging="onResizedata"
                    @resizing="onResize"
                    :parent="true"
                    :resizable="false"
                  >
                    <img
                      src="../../assets/store/default_avatar.png"
                      style="width: 50px; height: 50px"
                    />
                  </vue-draggable-resizable>
                </div>
                <div class="poster-reset" @click="resetbtn">重置</div>
              </div>
              <div class="poster-buttom">
                <p>海报图设计说明：（设计图宽度为750px时）</p>
                <p>头像（方型）尺寸为 100 * 100px</p>
                <p>二维码（方型）尺寸为 220 * 220px</p>
                <p>小技巧：</p>
                <p>1、把头像拖拽到二维码上面，可以隐藏头像</p>
                <p>
                  2、当头像、二维码拖拽模块出现偏离屏幕、无法拖动等异常情况，可使用“重置”按钮进行复位操作
                </p>
              </div>
            </div>
          </el-form-item>
          <!-- 海报设置 end -->
        </el-form>
      </div>
    </div>
    <!-- footer -->
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button
        size="small"
        @click="
          formFormatSubmit({
            router: {
              type: 'replace',
              path: '/application/cardBagSetting',
              code: 1,
            },
          })
        "
        type="primary"
        >保存</el-button
      >
      <router-link tag="span" to="/application/cardBagSetting">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
    <!-- footer end -->
    <!-- 链接选择器 -->
    <choose-link
      ref="chooseIconLink"
      :config="chooseIconLinkConfig"
      :changeEvt="uploadIconFileChange"
    ></choose-link>
    <!-- 链接选择器 end -->
    <!-- 广告链接选择器 -->
    <choose-link
      ref="chooseAdLink"
      :config="chooseAdLinkConfig"
      :changeEvt="handleAdLinkChange"
    ></choose-link>
    <!-- 广告链接选择器 -->
    <!-- 推广 -->
    <share-link :config="shareLinkConfig" ref="sharelink">
      <template slot="title">-卡包</template>
      <template slot="el-form-item">
        <el-form-item
          label="卡包小程序路径"
          v-if="shareLinkConfig.params.qrUrl"
        >
          <el-input
            style="width: 270px"
            readonly
            placeholder="请输入内容"
            v-model="shareLinkConfig.params.qrUrl"
            class="input-with-select"
          >
            <el-button
              slot="append"
              @click="handleClipboard(shareLinkConfig.params.qrUrl, $event)"
              >复制</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item
          label="卡包公众号链接"
          v-if="shareLinkConfig.params.linkUrl"
        >
          <el-input
            style="width: 270px"
            readonly
            placeholder="请输入内容"
            v-model="shareLinkConfig.params.linkUrl"
            class="input-with-select"
          >
            <el-button
              slot="append"
              @click="handleClipboard(shareLinkConfig.params.linkUrl, $event)"
              >复制</el-button
            >
          </el-input>
        </el-form-item>
      </template>
    </share-link>
    <!-- 推广 end -->
  </div>
</template>

<script>
import fp from "lodash/fp";
import {
  cardSettingGet,
  cardBagSaveSetting,
  cardExtension,
} from "@/api/cardBag";
import ChooseFiles from "@/components/ChooseFiles/index";
import mixins from "@/mixins/mixins";
import ChooseLink from "@/components/ChooseLink/index";
import ShareLink from "@/components/ShareLink/index";
import clipboard from "@/utils/clipboard";
export default {
  mixins: [mixins.getters("Form")],
  components: {
    ChooseFiles,
    ChooseLink,
    ShareLink,
  },
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      x1: 0,
      y1: 0,
      // 推广链接的接口数据
      cardExtensionRes: {},
      // 链接选择器配置
      chooseIconLinkConfig: {
        type: ["chooseLink"],
        initList: [],
        link_type: "1",
      },
      chooseAdLinkConfig: {
        type: ["chooseLink"],
        initList: [],
        link_type: "1",
      },
      // 悬浮框图
      chooseButtonImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: false, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "button_image",
          model: "img",
        },
      },
      // 分享图
      chooseShareImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: false, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "share_image",
          model: "img",
        },
      },
      // 地图标记图
      chooseMapImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: false, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "maker_icon",
          model: "img",
        },
      },
      // 广告图
      chooseAdImageformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: true, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "ad_image",
          model: "img",
        },
      },
      // 海报图
      choosePosterformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: true, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "poster",
          model: "img",
        },
      },
      choosePlatformConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: "display",
        },
        isUnique: true, //在图片选择器中是否多选
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "img",
          model: "img",
        },
      },
      formFormatData: {
        key: "cardBagSetting",
        api: {
          editForm: {
            api: cardSettingGet,
            params: {
              id: this.$route.query.id,
            },
            redirect: "id",
            filters: {
              img: {
                bindInit: [
                  "chooseShareImageformConfig",
                  "chooseAdImageformConfig",
                ],
              },
            },
          },
          submitForm: cardBagSaveSetting,
        },
        formData: {
          // 悬浮按钮
          button: {
            icon: [],
            text: "",
            type: 3,
            link: "",
          },
          // 分享内容
          share_content: "",
          // 分享图片
          share_image: [],
          // 广告图片
          ad_image: [],
          // 广告链接
          ad_link: '',
          // 自定义文字
          font: {
            ka_bao: "",
            ci: "",
          },
          // 海报图片
          poster: [],
          // 海报设置-头像
          head_action: [],
          // 海报设置-二维码
          code_action: [],
        },
      },
      shareLinkConfig: {
        current: "weChatQr",
        params: {
          weChat_short_url: "",
          qrUrl: "",
          linkUrl: "",
          weChatQr: "",
          appQr: "",
          self_order: "",
        },
      },
    };
  },
  created() {
    // 请求表单数据
    cardSettingGet().then((res) => {
      const data = fp.get("data.data", res) || {};
      this.x = Number(data.code_action[0]) || 0;
      this.y = Number(data.code_action[1]) || 0;
      this.x1 = Number(data.head_action[0]) || 0;
      this.y1 = Number(data.head_action[1]) || 0;
      this.formFormatData.formData = data;
      this.chooseAdImageformConfig.initList = data.ad_image || [];
      this.chooseShareImageformConfig.initList = data.share_image || [];
      this.choosePosterformConfig.initList = data.poster || [];
      this.chooseButtonImageformConfig.initList = data.button.icon || [];
      this.chooseMapImageformConfig.initList = data.maker_icon || [];
    });
    this.fetchCardExtensionRes();
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event);
    },
    // 请求推广链接数据
    fetchCardExtensionRes() {
      cardExtension().then((res) => {
        this.cardExtensionRes = fp.get("data.data", res);
        const {
          data: {
            data: { wxApp_url, weChat_url, wxApp_qrcode, weChat_qrcode },
          },
        } = res;
        this.shareLinkConfig.params.qrUrl = wxApp_url;
        this.shareLinkConfig.params.linkUrl = weChat_url;
        this.shareLinkConfig.params.weChatQr = weChat_qrcode;
        this.shareLinkConfig.params.appQr = wxApp_qrcode;
        this.shareLinkConfig.params.url = url;
        this.shareLinkConfig.params.self_order = self_order;
        this.shareLinkConfig.params.self_order_h5 = self_order_h5;
        this.shareLinkConfig.params.weChat_short_url = weChat_short_url;
        this.shareLinkConfig.current = weChat_qrcode
          ? "weChatQr"
          : weChat_qrcode
          ? "appQr"
          : "";
        this.shareLinkConfig = {
          ...this.shareLinkConfig,
        };
      });
    },
    sharelink() {
      this.$refs.sharelink.toggle();
    },
    handleButtonImageChange(args) {
      const data = fp.get("displayData", args) || [];
      this.formFormatData.formData.button.icon = data;
    },
    getPath(path) {
      return path.includes("https://") || path.includes("http://")
        ? `${path}`
        : require(`@/assets/custorm_style/${path}`);
    },
    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      console.log("onDrag", x, y);
      //  code_action:[],二维码
      //  head_action:[],头像
      this.x = x || 0;
      this.y = y || 0;
      this.formFormatData.formData.code_action = [this.x, this.y];
    },
    onResizedata(x1, y1) {
      this.x1 = x1 || 0;
      this.y1 = y1 || 0;
      this.formFormatData.formData.head_action = [this.x1, this.y1];
    },
    resetbtn() {
      this.x = 0;
      this.y = 0;
      this.x1 = 0;
      this.y1 = 0;
      this.formFormatData.formData.code_action = [0, 0];
      this.formFormatData.formData.head_action = [0, 0];
    },
    uploadIconFileChange(files) {
      const { key } = files;
      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ path }],
        } = files;
        if (file_path || path) {
          this.formFormatData.formData.button.link = file_path || path;
        } else {
          this.$message.error("请选择链接~!");
        }
      }
    },
    handleAdLinkChange(files) {
      const { key } = files;

      if (key === "ChooseLink") {
        const {
          currentRow: [file_path],
          displayData: [{ path }],
        } = files;
        if (file_path || path) {
          this.formFormatData.formData.ad_link = file_path || path;
        } else {
          this.$message.error("请选择链接~!");
        }
      }
      console.log("files", files, file_path, path);
    },
    //链接打开
    uploadFileToggle() {
      this.$refs.chooseIconLink.toggle();
    },
    //链接打开
    adLinkToggle() {
      this.$refs.chooseAdLink.toggle();
    },
  },
};
</script>

<style lang="scss" scoped>
.link-box {
  background: #e8effc;
  border: 0;
  width: 290px;
  height: 28px;
  border-radius: 3px;
  padding-left: 18px;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.update-load {
  $update: 50px;
  display: inline-block;
  cursor: pointer;
  width: $update;
  height: $update;
  background: #fafbff;
  border: 1px dashed #c0ccda;
  color: #a8abb0;
  border-radius: 5px;

  i {
    font-size: 14px;
    color: #8c939d;
    width: $update;
    height: $update;
    line-height: $update;
    text-align: center;
  }

  .el-select-dropdown {
    max-width: 243px;
  }

  .el-select-dropdown__item {
    display: inline-block;
  }

  .el-select-dropdown__item span {
    min-width: 205px;
    display: inline-block;
  }
}
.form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
.poster-wrap {
  align-items: center;
  display: flex;
  .poster-box {
    position: relative;
    width: 375px;
    height: 667px;
    padding: 102px 22px 115px 23px;
    // background: url(../../assets/image/drag-bg.png) 0px 0px / 100% 100% no-repeat;
    box-sizing: content-box;
    .poster-img {
      position: relative;
      width: 375px;
      height: 667px;
    }
    .poster-reset {
      position: absolute;
      bottom: 22px;
      left: 174px;
      right: 23px;
      text-align: center;
      flex: 0 0 70px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      cursor: pointer;
      border-radius: 50%;
    }
  }
  .poster-buttom {
    padding: 2px 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
    margin: 0px 0px 0px 20px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
  }
  .my-class {
    border: 1px dashed #993322;
  }
  .my-class > :active {
    border: 1px solid #555555;
  }
}
</style>